<template>
    <div class="family-page">
        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 头像和标题部分 -->
            <div class="family-header">
                <div class="avatar-container">
                    <div class="name-avatar main-name-avatar" :style="getAvatarStyle(userStore.userInfo?.name || '')">
                        {{ userStore.userInfo?.name?.charAt(0) || '' }}
                    </div>
                </div>
                <h1 class="family-title">家庭共享</h1>
                <p class="family-desc">查看家庭成员可访问和共享的内容，以及管理儿童账户设置和家长控制。</p>
            </div>

            <!-- 组织者视图 -->
            <template v-if="userStore.userInfo?.familyRole?.id === 1">
                <div class="members-section">
                    <h2 class="section-title">家庭成员</h2>
                    <div class="members-grid">
                        <!-- 自己 -->
                        <div class="member-card" @click="showOwnMemberDetail(userStore.userInfo)">
                            <div class="name-avatar" :style="getAvatarStyle(userStore.userInfo?.name || '')">
                                {{ userStore.userInfo?.name?.charAt(0) || '' }}
                            </div>
                            <div class="member-info">
                                <span class="member-name">{{ userStore.userInfo?.name }}</span>
                                <span class="member-role">{{ userStore.userInfo?.familyRole?.role }}</span>
                            </div>
                        </div>

                        <!-- 其他成员列表 -->
                        <div v-for="member in familyMembers" :key="member.userId" class="member-card"
                            @click="showMemberDetail(member)">
                            <div class="name-avatar" :style="getAvatarStyle(member.name)">
                                {{ member.name.charAt(0) }}
                            </div>
                            <div class="member-info">
                                <span class="member-name">{{ member.name }}</span>
                                <span class="member-role">{{ member.role.role }}</span>
                            </div>
                        </div>

                        <!-- 添加成员卡片 -->
                        <div v-if="familyMembers.length < 5" class="add-member-card" @click="showInviteDialog = true">
                            <div class="add-icon">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                            </div>
                            <span>邀请家庭成员</span>
                        </div>
                        <div v-else class="member-limit-card">
                            <el-icon>
                                <InfoFilled />
                            </el-icon>
                            <span>已达到成员上限</span>
                        </div>
                    </div>
                </div>

                <!-- 快捷操作区域 -->
                <div class="quick-actions">
                    <el-button class="action-button create-child" @click="handleCreateChild" :disabled="familyMembers.length >= 5">
                        <el-icon>
                            <User />
                        </el-icon>
                        创建儿童账户
                    </el-button>
                </div>
            </template>

            <!-- 成员视图 -->
            <template v-else>
                <div class="member-view">
                    <div class="organizer-info">
                        <h2 class="section-title">组织者</h2>
                        <div class="organizer-card" v-if="familyOrganizer">
                            <div class="name-avatar" :style="getAvatarStyle(familyOrganizer.name)">
                                {{ familyOrganizer.name.charAt(0) }}
                            </div>
                            <div class="organizer-details">
                                <span class="organizer-name">{{ familyOrganizer.name }}</span>
                                <span class="organizer-role">组织者</span>
                            </div>
                        </div>
                    </div>

                    <div class="shared-content">
                        <h2 class="section-title">共享内容</h2>
                        <div class="content-cards">
                            <div class="content-card" @click="handleViewHealth">
                                <div class="card-icon-wrapper">
                                    <el-icon class="card-icon">
                                        <DataAnalysis />
                                    </el-icon>
                                </div>
                                <div class="card-info">
                                    <h3>健康数据</h3>
                                    <p>查看和分享家庭成员的健康状况</p>
                                </div>
                                <el-icon class="card-arrow">
                                    <ArrowRight />
                                </el-icon>
                            </div>
                            <div class="content-card" @click="handleViewRecommendations">
                                <div class="card-icon-wrapper">
                                    <el-icon class="card-icon">
                                        <Food />
                                    </el-icon>
                                </div>
                                <div class="card-info">
                                    <h3>饮食推荐</h3>
                                    <p>获取个性化的饮食建议</p>
                                </div>
                                <el-icon class="card-arrow">
                                    <ArrowRight />
                                </el-icon>
                            </div>
                        </div>
                    </div>

                    <div class="leave-family">
                        <el-button class="leave-button" @click="handleLeaveFamily">
                            退出家庭共享
                        </el-button>
                    </div>
                </div>
            </template>
        </div>

        <!-- 邀请对话框 - 第一步 -->
        <el-dialog v-model="showInviteDialog" width="480px" class="apple-style-dialog" :show-close="false"
            :close-on-click-modal="false">
            <div class="dialog-header">
                <button class="apple-button-text" @click="showInviteDialog = false">取消</button>
            </div>
            <div class="invite-content">
                <h2 class="apple-title">邀请家庭成员</h2>
                <p class="apple-desc">输入用户名和密码以邀请家庭成员</p>
                <el-form :model="inviteForm" class="apple-style-form">
                    <el-form-item>
                        <el-input v-model="inviteForm.username" placeholder="用户名" class="apple-style-input">
                            <template #prefix>
                                <el-icon class="apple-input-icon">
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="inviteForm.password" type="password" placeholder="密码" show-password
                            class="apple-style-input">
                            <template #prefix>
                                <el-icon class="apple-input-icon">
                                    <Lock />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-button class="apple-button-primary" @click="handleContinue">
                    继续
                </el-button>
            </div>
        </el-dialog>

        <!-- 邀请对话框 - 第二步 -->
        <el-dialog v-model="showConfirmDialog" width="480px" class="apple-style-dialog" :show-close="false"
            :close-on-click-modal="false">
            <div class="invite-content">
                <h2 class="apple-title">确认邀请</h2>
                <div class="confirm-message">
                    <p class="apple-desc">您将可以查看该用户的以下信息：</p>
                    <ul class="apple-list">
                        <li>
                            <el-icon class="list-icon">
                                <DataAnalysis />
                            </el-icon>
                            <span>健康数据</span>
                        </li>
                        <li>
                            <el-icon class="list-icon">
                                <Food />
                            </el-icon>
                            <span>饮食推荐</span>
                        </li>
                        <li>
                            <el-icon class="list-icon">
                                <View />
                            </el-icon>
                            <span>其他共享内容</span>
                        </li>
                    </ul>
                </div>
                <el-button class="apple-button-primary" @click="handleFinish">
                    完成
                </el-button>
            </div>
        </el-dialog>

        <!-- 成员详情对话框 -->
        <el-dialog v-model="showDetailDialog" :title="selectedMember?.name" width="400px" class="member-detail-dialog"
            :show-close="true">
            <div class="member-detail-content">
                <!-- 头像和名字 -->
                <div class="detail-header">
                    <div class="detail-avatar" :style="getAvatarStyle(selectedMember?.name || '')">
                        {{ selectedMember?.name?.charAt(0) || '' }}
                    </div>
                    <div class="detail-name">
                        {{ selectedMember?.name }}
                        <span class="detail-you" v-if="selectedMember?.userId === userStore.userInfo?.id">(你)</span>
                    </div>
                    <div class="detail-role">{{ selectedMember?.role?.role || selectedMember?.familyRole?.role }}</div>
                </div>

                <!-- 账户信息 -->
                <div class="detail-section">
                    <div class="detail-item">
                        <div class="item-icon">
                            <el-icon>
                                <User />
                            </el-icon>
                        </div>
                        <div class="item-content">
                            <div class="item-title">膳养智选账户</div>
                            <div class="item-value">{{ selectedMember?.username }}</div>
                        </div>
                        <el-icon class="item-arrow">
                            <ArrowRight />
                        </el-icon>
                    </div>

                    <!-- 阅览 -->
                    <div class="detail-item" @click="handleViewRecommendations(selectedMember)">
                        <div class="item-icon blue">
                            <el-icon>
                                <View />
                            </el-icon>
                        </div>
                        <div class="item-content">
                            <div class="item-title">阅览</div>
                            <div class="item-desc">访问家人的智能饮食推荐</div>
                        </div>
                        <el-icon class="item-arrow">
                            <ArrowRight />
                        </el-icon>
                    </div>

                    <!-- 健康共享 -->
                    <div class="detail-item" @click="handleViewHealth(selectedMember)">
                        <div class="item-icon green">
                            <el-icon>
                                <DataAnalysis />
                            </el-icon>
                        </div>
                        <div class="item-content">
                            <div class="item-title">健康共享</div>
                            <div class="item-desc">查看家人的健康状态</div>
                        </div>
                        <el-icon class="item-arrow">
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>

                <!-- 停止共享按钮 -->
                <div class="detail-footer">
                    <el-button class="stop-sharing-button" @click="removeMember(selectedMember)">
                        {{ selectedMember?.role?.id === 1 ? '停止使用家庭共享' : '移除该家庭成员' }}
                    </el-button>
                </div>
            </div>
        </el-dialog>

        <!-- 创建儿童账户对话框 - 第一步 -->
        <el-dialog
          v-model="showCreateChildStep1"
          width="460px"
          class="apple-style-dialog"
          :show-close="false"
          :close-on-click-modal="false"
        >
          <div class="dialog-header">
            <button class="apple-button-text" @click="showCreateChildStep1 = false">取消</button>
          </div>
          <div class="invite-content">
            <h2 class="apple-title">创建儿童账户</h2>
            <p class="apple-desc">为您的孩子创建一个账户</p>
            <el-form :model="childAccountDTO" :rules="step1Rules" ref="step1FormRef">
              <el-form-item prop="username">
                <el-input v-model="childAccountDTO.username" placeholder="用户名" class="apple-style-input">
                  <template #prefix>
                    <el-icon class="apple-input-icon">
                      <User />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="childAccountDTO.password" type="password" placeholder="密码" show-password
                  class="apple-style-input">
                  <template #prefix>
                    <el-icon class="apple-input-icon">
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="rePassword">
                <el-input v-model="childAccountDTO.rePassword" type="password" placeholder="确认密码" show-password
                  class="apple-style-input">
                  <template #prefix>
                    <el-icon class="apple-input-icon">
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <el-button class="apple-button-primary" @click="handleChildStep1">
              继续
            </el-button>
          </div>
        </el-dialog>

        <!-- 创建儿童账户对话框 - 第二步 -->
        <el-dialog
          v-model="showCreateChildStep2"
          title="完善儿童信息"
          width="460px"
          class="apple-style-dialog"
          :show-close="false"
          :close-on-click-modal="false"
        >
          <div class="dialog-header">
            <button class="apple-button-text" @click="showCreateChildStep2 = false">返回</button>
          </div>
          <div class="invite-content">
            <h2 class="apple-title">完善儿童信息</h2>
            <p class="apple-desc">请填写儿童的基本信息</p>
            <el-form :model="childAccountDTO" :rules="step2Rules" ref="step2FormRef">
              <el-form-item prop="fullName">
                <el-input v-model="childAccountDTO.fullName" placeholder="姓名" class="apple-style-input">
                  <template #prefix>
                    <el-icon class="apple-input-icon">
                      <User />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="sex">
                <el-select v-model="childAccountDTO.sex" placeholder="性别" class="apple-style-input">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </el-form-item>
              <el-form-item prop="age">
                <el-input-number v-model="childAccountDTO.age" :min="1" :max="14" placeholder="年龄" class="apple-style-input" />
              </el-form-item>
              <el-form-item prop="height">
                <el-input-number v-model="childAccountDTO.height" :min="0" :precision="1" :step="0.1" placeholder="身高(cm)" class="apple-style-input" />
              </el-form-item>
              <el-form-item prop="weight">
                <el-input-number v-model="childAccountDTO.weight" :min="0" :precision="1" :step="0.1" placeholder="体重(kg)" class="apple-style-input" />
              </el-form-item>
            </el-form>
            <el-button class="apple-button-primary" @click="handleChildStep2">
              完成
            </el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    ArrowLeft,
    ArrowRight,
    Plus,
    User,
    Setting,
    Message,
    MoreFilled,
    DataAnalysis,
    Food,
    View,
    Lock,
    InfoFilled
} from '@element-plus/icons-vue'
import { getFamilyMembersService, inviteFamilyMemberService, stopFamilyShareService, deleteFamilyMemberService, createChildAccountService } from '@/api/family'
import { UserRegisterService } from '@/api/user'
const router = useRouter()
const userStore = useUserStore()
const showInviteDialog = ref(false)
const showConfirmDialog = ref(false)
const inviteForm = ref({
    username: '',
    password: ''
})
const showDetailDialog = ref(false)
const selectedMember = ref(null)

// 家庭成员数据
const familyMembers = ref([])
const familyOrganizer = ref(null)

// 儿童账户创建相关
const showCreateChildStep1 = ref(false)
const showCreateChildStep2 = ref(false)
const step1FormRef = ref(null)
const step2FormRef = ref(null)

// 儿童账户 DTO
const childAccountDTO = ref({
    username: '',
    password: '',
    rePassword: '',
    fullName: null,
    sex: '',
    age: null,
    height: null,
    weight: null
})

// 第一步验证规则
const step1Rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value.length < 8 || value.length > 20) {
                    callback(new Error('用户名长度必须在8-20位之间'))
                } else if (!/^(?=.*[a-z])(?=.*\d)[a-z\d]{8,20}$/.test(value)) {
                    callback(new Error('用户名必须包含小写字母和数字'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    rePassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== childAccountDTO.value.password) {
                    console.log(value);
                    console.log(childAccountDTO.value.password);
                    callback(new Error('两次输入的密码不一致'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
}

// 第二步验证规则
const step2Rules = {
    fullName: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    sex: [
        { required: true, message: '请选择性别', trigger: 'change' }
    ],
    age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value < 1 || value > 14) {
                    callback(new Error('儿童账号年龄必须在14周岁以下'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ],
    height: [
        { required: true, message: '请输入身高', trigger: 'blur' }
    ],
    weight: [
        { required: true, message: '请输入体重', trigger: 'blur' }
    ]
}

// 获取家庭成员列表
const getFamilyMembers = async () => {
    try {
        const response = await getFamilyMembersService()
        if (userStore.userInfo?.familyRole?.id === 1) {
            // 如果当前用户是组织者
            familyMembers.value = response.data
        } else {
            // 如果当前用户是普通成员，需要找到组织者
            const organizer = response.data.find(member => member.role.id === 1)
            if (organizer) {
                familyOrganizer.value = {
                    name: organizer.name,
                    userId: organizer.userId,
                    role: organizer.role
                }
                // 从列表中移除组织者
                familyMembers.value = response.data.filter(member => member.role.id !== 1)
            } else {
                familyMembers.value = response.data
            }
        }
    } catch (error) {
        ElMessage.error('获取家庭成员失败')
    }
}

// 生成头像样式
const getAvatarStyle = (name) => {
    // 生成随机但固定的颜色（基于名字）
    const colors = [
        '#f56c6c', '#e6a23c', '#67c23a', '#409EFF', '#9c27b0',
        '#3f51b5', '#2196f3', '#00bcd4', '#009688', '#4caf50'
    ]
    const index = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % colors.length

    return {
        width: '60px',
        height: '60px',
        borderRadius: '50%',
        backgroundColor: colors[index],
        color: 'white',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '24px',
        fontWeight: '500'
    }
}

// 在组件挂载时获取家庭成员列表
onMounted(() => {
    getFamilyMembers()
})

// 处理邀请发送
const handleContinue = async () => {
    try {
        if (familyMembers.value.length >= 5) {
            ElMessage.warning('已达到家庭成员上限（5人）')
            return
        }
        const res = await inviteFamilyMemberService(inviteForm.value)
        if (res.code === 200) {
            showInviteDialog.value = false
            showConfirmDialog.value = true
        }
    } catch (error) {
        inviteForm.value = { username: '', password: '' }
        ElMessage.error(res.message || '添加家庭成员失败')
    }
}

// 处理完成按钮点击
const handleFinish = async () => {
    showConfirmDialog.value = false
    getFamilyMembers()
    inviteForm.value = { username: '', password: '' }
}
//本人详情
const showOwnMemberDetail = (owner) => {
    selectedMember.value =
    {
        name: owner.name,
        userId: owner.id,
        role: owner.familyRole,
        username: owner.username
    }
    showDetailDialog.value = true
}
// 显示成员详情
const showMemberDetail = (member) => {
    selectedMember.value = member
    showDetailDialog.value = true
}

// 查看饮食推荐
const handleViewRecommendations = (member) => {

}

// 查看健康状态
const handleViewHealth = (member) => {

}

// 管理家长控制
const manageChildControl = (member) => {
}

// 移除成员
const removeMember = (member) => {
    if (member.role.id === 1) {
        ElMessageBox.confirm(
            '确定要停止使用家庭共享吗？停止后将无法访问家庭共享内容。',
            '停止使用家庭共享',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        ).then(async () => {
            try {
                await stopFamilyShareService()
                userStore.userInfo.familyRole = null
                ElMessage.success('已停止使用家庭共享')
                router.push('/index')
            } catch (error) {
                ElMessage.error('停止使用家庭共享失败')
            }
        })
    } else {
        ElMessageBox.confirm(
            '确定要移除该成员吗？移除后将无法访问家庭共享内容。',
            '移除成员',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        ).then(async () => {
            try {
                await deleteFamilyMemberService(member.userId)
                ElMessage.success('成员已移除')
                getFamilyMembers()
                showDetailDialog.value = false
            } catch (error) {
                ElMessage.error('移除成员失败')
            }
        })
    }
}

// 退出家庭
const handleLeaveFamily = () => {
    ElMessageBox.confirm(
        '确定要退出家庭共享吗？退出后将无法访问家庭共享内容。',
        '退出家庭',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        try {
            await deleteFamilyMemberService(userStore.userInfo.id)
            userStore.userInfo.familyRole = null
            ElMessage.success('已退出家庭共享')
            router.push('/index')
        } catch (error) {
            ElMessage.error('退出家庭共享失败')
        }
    })
}

// 处理第一步提交
const handleChildStep1 = async () => {
    if (!step1FormRef.value) return
    
    await step1FormRef.value.validate(async (valid) => {
        if (valid) {
            try {
                const res = await UserRegisterService(childAccountDTO.value)
                if (res.code === 200) {
                    showCreateChildStep1.value = false
                    showCreateChildStep2.value = true
                } else {
                    ElMessage.error(res.message || '创建账户失败')
                }
            } catch (error) {
                ElMessage.error('创建账户失败')
            }
        }
    })
}

// 处理第二步提交
const handleChildStep2 = async () => {
    if (!step2FormRef.value) return
    
    await step2FormRef.value.validate(async (valid) => {
        if (valid) {
            try {
                const res = await createChildAccountService(childAccountDTO.value)
                if (res.code === 200) {
                    ElMessage.success('创建儿童账户成功')
                    showCreateChildStep2.value = false
                    // 重置表单
                    childAccountDTO.value = {
                        username: '',
                        password: '',
                        rePassword: '',
                        fullName: '',
                        sex: '',
                        age: null,
                        height: null,
                        weight: null
                    }
                    getFamilyMembers()
                } else {
                    ElMessage.error(res.message || '创建儿童账户失败')
                }
            } catch (error) {
                ElMessage.error('创建儿童账户失败')
            }
        }
    })
}

// 修改现有的 handleCreateChild 函数
const handleCreateChild = () => {
    showCreateChildStep1.value = true
}
</script>

<style scoped>
.family-page {
    min-height: 100vh;
    background: #f5f7fa;
    padding: 20px;
}

.page-header {
    margin-bottom: 40px;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #409EFF;
    font-size: 16px;
}

.main-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

.family-header {
    text-align: center;
    margin-bottom: 60px;
}

.avatar-container {
    position: relative;
    display: inline-block;
    margin-bottom: 24px;
}

.main-name-avatar {
    width: 100px !important;
    height: 100px !important;
    font-size: 36px !important;
}

.family-title {
    font-size: 32px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 16px;
}

.family-desc {
    font-size: 16px;
    color: #606266;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.section-title {
    font-size: 24px;
    color: #303133;
    margin-bottom: 24px;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.member-card,
.add-member-card {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.member-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.member-info {
    flex: 1;
}

.member-name {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
}

.member-role {
    font-size: 14px;
    color: #909399;
}

.more-icon {
    font-size: 20px;
    color: #909399;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.more-icon:hover {
    background: rgba(144, 147, 153, 0.1);
    color: #606266;
}

.add-member-card {
    cursor: pointer;
    justify-content: center;
    color: #409EFF;
    background: rgba(64, 158, 255, 0.1);
    border: 2px dashed #409EFF;
}

.add-member-card:hover {
    background: rgba(64, 158, 255, 0.15);
    transform: translateY(-2px);
}

.add-icon {
    font-size: 24px;
}

.quick-actions {
    margin-top: 40px;
}

.action-button {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.create-child {
    background: linear-gradient(135deg, #B17FFF, #935FE2);
    border: none;
    color: white;

    &:disabled {
        background: linear-gradient(135deg, #d4c1eb, #c5b3e0);
        cursor: not-allowed;
        opacity: 0.7;
        transform: none;
        box-shadow: none;
    }
}

.create-child:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(177, 127, 255, 0.3);
}

/* 成员视图样式 */
.member-view {
    padding: 20px 0;
}

.organizer-card {
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.organizer-details {
    flex: 1;
}

.organizer-name {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 4px;
}

.organizer-role {
    font-size: 14px;
    color: #FF8C00;
}

.shared-content {
    margin-bottom: 60px;
}

.shared-content .section-title {
    font-size: 28px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 32px;
}

.content-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.content-card {
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.content-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    background: #f5f5f7;
}

.content-card:active {
    transform: translateY(0);
}

.card-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #007AFF, #5856D6);
}

.card-icon {
    font-size: 24px;
    color: white;
}

.card-info {
    flex: 1;
}

.card-info h3 {
    font-size: 17px;
    font-weight: 500;
    color: #1D1D1F;
    margin-bottom: 6px;
}

.card-info p {
    font-size: 14px;
    color: #86868B;
    line-height: 1.4;
    margin: 0;
}

.card-arrow {
    color: #86868B;
    font-size: 16px;
    transition: transform 0.3s ease;
}

.content-card:hover .card-arrow {
    transform: translateX(4px);
    color: #007AFF;
}

.leave-family {
    text-align: center;
    margin-top: 60px;
}

.leave-button {
    color: #FF3B30;
    background: transparent;
    border: none;
    font-size: 17px;
    padding: 12px 32px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;

    &:hover {
        background: rgba(255, 59, 48, 0.1);
        transform: translateY(-1px);
    }

    &:active {
        transform: translateY(0);
    }
}

/* Apple 风格对话框样式 */
.apple-style-dialog {
    :deep(.el-dialog) {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        max-width: 90%;
    }

    :deep(.el-dialog__header) {
        display: none;
    }

    :deep(.el-dialog__body) {
        padding: 0;
    }

    :deep(.el-input-number) {
        width: 100%;
        
        .el-input__wrapper {
            width: 100%;
            background-color: #f5f7fa;
            border: none;
            box-shadow: none !important;
            border-radius: 14px;
            padding: 4px 16px;
            height: 48px;
            transition: all 0.3s ease;

            &:hover {
                background-color: #eef1f6;
            }

            &.is-focus {
                background-color: #eef1f6;
                box-shadow: inset 0 0 0 1px #0066CC !important;
            }
        }

        .el-input__inner {
            height: 48px;
            line-height: 48px;
        }
    }

    :deep(.el-select) {
        width: 100%;
        
        .el-input__wrapper {
            background-color: #f5f7fa;
            border: none;
            box-shadow: none !important;
            border-radius: 14px;
            padding: 4px 16px;
            height: 48px;
            transition: all 0.3s ease;

            &:hover {
                background-color: #eef1f6;
            }

            &.is-focus {
                background-color: #eef1f6;
                box-shadow: inset 0 0 0 1px #0066CC !important;
            }
        }
    }
}

.dialog-header {
    position: relative;
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.apple-button-text {
    color: #007AFF;
    background: none;
    border: none;
    font-size: 16px;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;

    &:hover {
        background-color: rgba(0, 122, 255, 0.1);
    }
}

.invite-content {
    padding: 32px 40px 40px;
}

.apple-title {
    font-size: 28px;
    font-weight: 600;
    color: #1D1D1F;
    margin: 0 0 12px;
    line-height: 1.2;
}

.apple-desc {
    font-size: 17px;
    color: #86868B;
    margin: 0 0 32px;
    line-height: 1.4;
}

.apple-style-form {
    margin-bottom: 24px;

    .el-form-item {
        margin-bottom: 16px;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.apple-style-input {
    :deep(.el-input__wrapper) {
        background-color: rgba(0, 0, 0, 0.02);
        border: none;
        box-shadow: none;
        padding: 14px 16px;
        border-radius: 12px;
        transition: all 0.3s ease;

        &:hover {
            background-color: rgba(0, 0, 0, 0.04);
        }

        &.is-focus {
            background-color: #fff;
            box-shadow: inset 0 0 0 1px #007AFF;
        }
    }

    :deep(.el-input__inner) {
        font-size: 17px;
        color: #1D1D1F;
        height: 24px;
        line-height: 24px;

        &::placeholder {
            color: #86868B;
        }
    }
}

.apple-input-icon {
    font-size: 20px;
    color: #86868B;
    margin-right: 12px;
}

.apple-button-primary {
    width: 100%;
    height: 50px;
    font-size: 17px;
    font-weight: 500;
    border-radius: 12px;
    background: #007AFF;
    border: none;
    color: white;
    transition: all 0.3s ease;
    margin-top: 32px;

    &:hover {
        background: #0071E3;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
    }

    &:active {
        transform: translateY(0);
    }
}

.apple-list {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
        display: flex;
        align-items: center;
        font-size: 17px;
        color: #1D1D1F;
        margin-bottom: 20px;
        padding: 16px;
        background: rgba(0, 0, 0, 0.02);
        border-radius: 12px;
        transition: background-color 0.2s ease;

        &:hover {
            background: rgba(0, 0, 0, 0.04);
        }

        &:last-child {
            margin-bottom: 0;
        }

        .list-icon {
            font-size: 20px;
            color: #007AFF;
            margin-right: 12px;
        }
    }
}

/* 成员详情对话框样式 */
.member-detail-dialog {
    :deep(.el-dialog__header) {
        padding: 16px 20px;
        margin-right: 0;
        border-bottom: 1px solid #f0f0f0;
    }

    :deep(.el-dialog__headerbtn) {
        top: 16px;
    }

    :deep(.el-dialog__body) {
        padding: 0;
    }
}

.member-detail-content {
    padding: 0;
}

.detail-header {
    padding: 24px;
    text-align: center;
}

.detail-avatar {
    width: 80px !important;
    height: 80px !important;
    font-size: 32px !important;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.detail-name {
    font-size: 20px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 4px;
}

.detail-you {
    font-size: 16px;
    color: #909399;
    margin-left: 4px;
}

.detail-role {
    font-size: 14px;
    color: #909399;
}

.detail-section {
    padding: 0 0 20px;
    border-top: 1px solid #f0f0f0;
}

.detail-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.detail-item:hover {
    background-color: #f5f7fa;
}

.item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: #606266;
}

.item-icon.blue {
    background: #ecf5ff;
    color: #409EFF;
}

.item-icon.green {
    background: #f0f9eb;
    color: #67c23a;
}

.item-content {
    flex: 1;
}

.item-title {
    font-size: 16px;
    color: #303133;
    margin-bottom: 2px;
}

.item-value,
.item-desc {
    font-size: 14px;
    color: #909399;
}

.item-arrow {
    color: #c0c4cc;
    font-size: 16px;
    transition: transform 0.3s ease;
}

.detail-item:hover .item-arrow {
    transform: translateX(4px);
    color: #909399;
}

.detail-footer {
    padding: 20px;
    text-align: center;
    border-top: 1px solid #f0f0f0;
}

.stop-sharing-button {
    width: 100%;
    color: #f56c6c;
    background: transparent;
    border: none;
    font-size: 15px;
    height: 40px;
    transition: all 0.3s ease;
}

.stop-sharing-button:hover {
    background: #fff1f0;
    color: #f56c6c;
}

.submit-button:hover {
    background: #0066CC;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
}

/* Add styles for the member limit card */
.member-limit-card {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #909399;
    border: 2px dashed #dcdfe6;
}

.member-limit-card .el-icon {
    font-size: 20px;
    color: #909399;
}
</style>
